import React from 'react';
import './SearchBar.css';

class SearchBar extends React.Component{
    //构造函数
    constructor(){
        super() //调用父类的构造函数
        this.state={
            isShowHistory:false,
            history:["11111","22222","333333"],
            enterIndex:-1,
            selectIndex:-1,
        }
    }

    //渲染
    render(){
        return(
            <div className="search-bar-container">
                <div className="search-bar-wrapper">
                    <div className="logo">
                        <img src="http://localhost:3000/baidu.png"></img>
                    </div>

                    <div className="search-input">
                        <input className="search-text"
                            onFocus={()=>{
                                this.setState({
                                    isShowHistory:true
                                })
                            }}
                            onBlur={()=>{
                                this.setState({
                                    isShowHistory:false
                                })
                            }}
                            onKeyDown={(event)=>{
                                var keyCode=event.keyCode;
                                console.log(keyCode);
                                if(keyCode===38){
                                    this.state.selectIndex--;
                                    if(this.state.selectIndex<0){
                                        this.state.selectIndex=this.state.history.length-1;
                                    }

                                    this.setState({
                                        selectIndex:this.state.selectIndex
                                    })

                                    this.refs.input.value=this.state.history[this.state.selectIndex]

                                }else if(keyCode===40){
                                    this.state.selectIndex++;
                                    if(this.state.selectIndex>this.state.history.length-1){
                                        this.state.selectIndex=0
                                    }

                                    this.setState({
                                        selectIndex:this.state.selectIndex
                                    })

                                    this.refs.input.value=this.state.history[this.state.selectIndex]
                                }
                            }}
                            ref="input"/>
                        <button className="search-button"
                            onClick={()=>{
                                var value=this.refs.input.value;
                            }}>百度一下</button>
                    </div>

                    <div className="search-content">
                        <div className={this.state.isShowHistory?'search-bar-history-container':'search-bar-history-container-hidder'}>
                            {
                                this.state.history.map((element,index)=>{
                                return <div key={index}
                                className={this.state.enterIndex===index?'search-history-hover':'search-history'}
                                //当鼠标进入
                                onMouseEnter={()=>{
                                    this.setState({
                                        enterIndex:index
                                    })
                                }}>{element}</div>
                                })
                            }
                        </div>
                     </div>
                    
                </div>
            </div>
        )
    }
}

export default SearchBar;